Hello and welcome to you in this video.
I will be in D.C. assess for our projet.
I've already a reference to this says far inside his team.
So here online line six is a link to where this says far would be.
So this is the name of the file.
So now I have to create the farm.
So click on you new file and save it.
Click see as am going to save it as my style doctor says clicks.
So you can see on the bottom right here it says csx.
Here on the title is say is success dotsie it to save time.
I've already pre staged sets.
I'm just going to add that on.
I'm not going to spend too much time on csx because this is not really a USS Cole.
But I will run through the code with you quickly so let me start from the top here from line 1 to the
line for my e-filing.
He had johore Entire hastier mail so this is same the font size will be 10 pixels.
Background colour is this colour this colour or is it hexadecimal colour which kind of looks like is
sky blue.
Call up or feel free to use whatever colour you like for your background so you could either use a hex
collar I have here or you can actually specify the actual name of the column on line 6.
Got the body element here so listowel I'm applying to.
I'm given a padian of zero and a margin of zero padding basically refers to the space inside the element
margin refers to this base outside element.
So what you're saying says don't forget the opening and curly braces.
And also don't forget to terminate each of the values for the properties you first signed.
Next we've got the hatoon element here so this a point here.
These are the stylin I've given it.
Hey will be heading teich so I pop in to my hastier email here you can see I've got the tag here.
That's what I'm referring to.
So I want the text to be aligned to its centre and the size of the text for each one.
Giving it a 100 pixels.
Mine height give an 8 1 margin from the bottom.
See the saw line 19 here.
This is a class ending where you see a period or a dot that is so close to going to the hastier mail.
This is a class I am referring to which is the span element.
So this is a stylin applied to it.
Give it a little background colour of blue padding.
This is a padding and I meant mine height bodies radials gives it a rounded age and colyar refers to
the collar of the actual text inside that element.
And here will go on the class called Game.
If I go into my hastier mail you can see this is a class I have defined here called key.
So which is the diff.
So that's what I am applying this stylin to.
So these are all basic stylee.
So you've got to with the height.
This plea was fleck's are let's play this flex flex physically is a property that specifies the length
of the item relative to the rest of the flexible items inside the same container.
Online photo what we call a flex wrap and we've got the value of wrap the Flex wrap property is used
to specify whether the flexible items should wrap or not.
So if the elements are not flexible attempt to flex wrap property will have no effect on line 32 got
a margin set to 0 0 to automate.
We automatically assign the margin.
And here we've got another class here called Hall.
If we go into the hastier mail we can see here.
I got a class here called Hall.
So that's what I meant.
Again I'm using the Flex after idea explain what the Flex property does and these are the values of
keeping it overflow busy.
Kelly refroze too there.
What happens if the content of our flaws is elements.
BOX.
So if it overflows it I've told it to hide it.
So the value of giving to that Buffalo is hidden.
And here we have got a position that I've set to relative.
So basically your reality position is relative to its normal position.
So the element is positioned relative to its normal position.
That's what that relative means.
So we've got the whole and then we've got the hall after the after till select online 41 basically inserts
something after the content of each of these selected element or elements that's what that is.
So you could also have the before and before basically is used to insert some before the content.
So these are all what will be inserted after that content this plea will be displayed in block as a
block.
And this is a background colour and this will give the background.
We are specifying an image and this is the location or the name of the image.
And these are the properties.
So we wanted to be built on Centre and we don't want it to repeat throughout the year with the background
size and we setting the value to content or its content.
Here we have the content the content property is used with the before and after sudol element.
So this here after known as this sudol element to you normally use that.
The content property online what it is will go away.
Weve said that we be 100 percent of the pirenne container and the high to be nineteen pixels off the.
Just a normal pixel size whenever you setting percentage it will reflect the the parents and containers
because going to be 100 percent off the parents content here on the right.
Ive just specified a peak value proposition here for setted to be absolute.
So the absolute position of an element is positioned relative to is first positioned system element
as well.
And then he'll 949 we've got the z index z index property physically specifies the stack order of an
element so an element with a great US tax or that is always in front of an element with a large stack
order.
So let's see we've got the height and the weight.
This said a hundred percent of the parent element and here we've got the background image again we don't
know the background image.
And we are using the mall image that's the location.
Again we want the properties from bottom centre but no repeat.
This is the value of the background size position absolute position from the top.
Gives you that with 100 percent height transition transition basically allows you to change property
values smoothly.
All give in duration of time.
So this is the decision I have set or point for second.
And then we've got the button.
This is the button that will basically be the start button.
So these are standard properties we've got to with the font size the height the colour background colour
the body radius gives the around that age margin from the left and then margin from the top.
So I'm just going to save that.
And that concludes our csx and will open up the document and we can just so I double click to open up
our project and this is a project I'm just going to click on this file here to see what it looks like
and you can see this is what the application looks like at the moment.
So it's much more presentable than it was without the CSF.
So we've basically got the structure and the design our set up in the next year we'll start to write
the job as group logic code that will make it all work.
Thanks for watching.
And bye for now.